<template>
	<view class="my-orders">
		<!-- 导航栏 -->
		<nav-bar backUrl="/pages/my/my" :isTabbar="true"></nav-bar>
		<!-- 状态标签栏 -->
		<scroll-view class="status-tabs" scroll-x="true" show-scrollbar="false">
			<view class="tabs-container">
				<view v-for="(tab, index) in statusTabs" :key="index" class="tab-item"
					:class="{ active: currentPaymentStatus === tab.value }" @tap="switchPaymentStatus(tab.value)">
					<view class="tab-content">
						<text>{{ tab.label }}</text>
						<text class="count" v-if="tab.count > 0">({{ tab.count }})</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="(order, index) in sortedOrderList" :key="index">
				<!-- 订单图片 -->
				<view class="order-image" @tap="showOrderDetail(order)">
					<image v-if="order.img" :src="order.img" mode="aspectFill"></image>
					<view v-else class="placeholder-image">
						<text>?</text>
						<text class="placeholder-text">订单号</text>
					</view>
				</view>
				<!-- 订单信息 -->
				<view class="order-info" @tap="showOrderDetail(order)">
					<!-- 订单标题 -->
					<view class="order-title">
						<text class="title-text">{{ order.serviceName }}</text>
					</view>
					<text class="additional-services" v-if="order.additionalService">附加项目:
						{{ order.additionalService }}</text>
					<view class="booking-time">订单编号：{{order.orderNo}}</view>
					<!-- 预约信息 -->
					<view class="booking-info">
						<text>{{order.orderType}}: {{ order.storeName }} {{ order.technicianName }}</text>
					</view>
					<view class="booking-time">预约时间：</view>
					<view class="booking-time">{{ order.appointmentTime }}</view>
					<view class="booking-time">下单时间：</view>
					<view class="booking-time">{{ order.createTime }}</view>
					<!-- 价格信息 -->
					<view class="price-info">
						<text class="price">价格：¥ {{ order.price }}</text>
					</view>
					<!-- 支付状态信息 -->
					<view class="payment-status">
						<text>支付状态：</text>
						<text :class="getPaymentStatusClass(order.paymentStatus)">
							{{ getPaymentStatusText(order.paymentStatus) }}
						</text>
					</view>
					<!-- 添加一个空白区域，为按钮腾出空间 -->
					<view class="action-space"></view>
				</view>
				<!-- 操作按钮 - 移到order-info外面，并调整样式 -->
				<view class="order-actions" v-if="order.status !== 4 && order.status !== 5">
					<view>
						<view class="action-btn pay-btn" v-if="order.paymentStatus === 0" @tap="goToPay(order)">
							<text>去支付</text>
						</view>
						<view class="action-btn" v-if="order.status === 3 && order.commentButtonDisplay !== true"
							@tap="goToReview(order)">
							<text>去评价</text>
						</view>
						<view class="action-btn" v-if="order.status === 3" @tap="applyAfterSale(order)">
							<text>申请售后</text>
						</view>
					</view>
					<view>
						<view class="action-btn qrcode-btn" v-if="order.status === 1&& order.paymentStatus === 1"
							@tap="showQRCode(order)">
							<text>二维码验票</text>
						</view>
						<!-- 仅待支付状态可取消 -->
						<view class="action-btn cancel-btn" v-if="order.paymentStatus === 0"
							@tap="showCancelConfirm(order)">
							<text>取消订单</text>
						</view>
					</view>
				</view>
				<!-- 订单状态标记 -->
				<view class="order-status" :class="getStatusClass(order.status)">
					<text>{{ order.statusText}}</text>
				</view>
			</view>
			<!-- 无数据提示 -->
			<view class="no-data" v-if="orderList.length === 0">
				<text>暂无订单数据</text>
			</view>
		</view>
		<!-- 添加二维码弹窗 -->
		<view class="qrcode-popup" v-if="showQRCodePopup">
			<view class="qrcode-content">
				<view class="qrcode-header">
					<text class="qrcode-title">订单二维码</text>
					<text class="qrcode-close" @tap="closeQRCode">×</text>
				</view>
				<view>
					<text>券码:</text>
					<text>{{currentQRCodeOrder.orderNo}}</text>
				</view>
				<view class="qrcode-body">
					<canvas id="qrcodeCanvas" canvas-id="qrcodeCanvas" style="width: 300px; height: 300px;"></canvas>
					<text class="qrcode-tip">请出示二维码给工作人员扫描，或输入券码</text>
				</view>
			</view>
		</view>
		<!-- 订单详情弹窗 -->
		<view class="order-detail-popup" v-if="showOrderDetailPopup">
			<view class="order-detail-content">
				<view class="order-detail-header">
					<text class="order-detail-title">订单详情</text>
					<text class="order-detail-close" @tap="closeOrderDetail">×</text>
				</view>
				<scroll-view scroll-y="true" class="order-detail-body">
					<view class="detail-item" v-for="(value, key) in currentOrderDetail" :key="key">
						<text class="detail-label">{{formatDetailLabel(key)}}</text>
						<text class="detail-value" :class="typeof value === 'object' ? value.type : ''">
							{{typeof value === 'object' ? value.value : value}}
						</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
import QRCode from 'qrcodejs2'

export default {
		components: {
			NavBar
		},
		data() {
			return {
				orderList: [],
				statusTabs: [{
						label: '全部',
						value: null,
						count: 0
					},
					{
						label: '未支付',
						value: 0,
						count: 0
					},
					{
						label: '已支付',
						value: 1,
						count: 0
					},
					{
						label: '已完成',
						value: 3,
						count: 0
					},
					{
						label: '已取消',
						value: 4,
						count: 0
					},
				],
				currentPaymentStatus: null,
				showQRCodePopup: false,
				currentQRCodeOrder: null,
				showOrderDetailPopup: false,
				currentOrderDetail: {}
			}
		},
		computed: {
			sortedOrderList() {
				return [...this.orderList].sort((a, b) => {
					const timeA = new Date(a.createTime || a.appointmentTime).getTime();
					const timeB = new Date(b.createTime || b.appointmentTime).getTime();
					return timeB - timeA;
				});
			}
		},
		onLoad(options) {
			if (options.code) {
				this.editUserOpenid(options.code)
			}
			this.loadOrders(true)
		},
		onShow() {
			const paymentResult = uni.getStorageSync('paymentResult');
			if (paymentResult) {
				uni.removeStorageSync('paymentResult');
				if (paymentResult.success) {
					setTimeout(() => {
						this.loadOrders(true);
					}, 500);
				}
			}
		},
		methods: {
			editUserOpenid(code) {
				let userInfo = uni.getStorageSync('userInfo')
				if (!userInfo) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
				uni.request({
					url: `${uni.$config.baseUrl}/wx/wx-service/getOauth2AccessToken`,
					method: 'GET',
					data: {
						code
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {
							uni.request({
								url: `${uni.$config.baseUrl}/member/member/edit-open-id`,
								method: 'POST',
								data: {
									id: userInfo.memberId,
									openId: res.data.data.openid
								},
								success: (wxRes) => {
									if (wxRes.statusCode === 200 && wxRes.data.code === 200) {
										userInfo.openId = res.data.data.openid
										uni.setStorageSync('userInfo', userInfo)
									}
								}
							})
						}
					}
				})
			},
			loadOrders(isFirstLoad = false) {
				uni.showLoading({
					title: '加载中...'
				});
				const userInfoStr = uni.getStorageSync('userInfo')
				let userInfo = null
				if (userInfoStr) {
					try {
						if (typeof userInfoStr === 'string') {
							const parsed = JSON.parse(userInfoStr)
							// 检查是否是登录响应格式
							if (parsed.code === 200 && parsed.data) {
								userInfo = parsed.data
							} else {
								userInfo = parsed
							}
						} else {
							userInfo = userInfoStr
						}
					} catch (e) {
						console.error('解析用户信息失败', e)
						// 解析失败时，尝试直接使用
						userInfo = userInfoStr
					}
				}
				// 构建请求参数 - AppointmentOrders对象
				const params = {
					userId: userInfo.memberId
				};
				// 如果选择了支付状态，添加到请求参数
				if (this.currentPaymentStatus !== null) {
					if (this.currentPaymentStatus === 3) {
						params.orderStatus = 3;
					} else if (this.currentPaymentStatus === 4) {
						params.orderStatus = 4;
					} else if (this.currentPaymentStatus === 0) {
						params.orderStatus = 0;
					} else {
						params.paymentStatus = this.currentPaymentStatus;
					}
				}
				uni.request({
					url: `${uni.$config.baseUrl}/orders/orders/listAll`,
					method: 'GET',
					data: params,
					success: (res) => {
						if (res.statusCode === 200 && res.data && res.data.code === 200) {
							const orders = res.data.rows || []
							if (orders.length > 0) {
								this.orderList = orders.map(order => ({
									id: order.id,
									orderNo: order.orderNo,
									serviceId: order.serviceId,
									orderType: order.orderType == 1 ? "预约到店" : "上门按摩",
									serviceName: order.serviceName || '未知服务',
									storeName: order.storeName || '',
									technicianName: order.technicianName || '',
									appointmentTime: order.appointmentDate + " " + order
										.appointmentTime,
									price: order.paymentAmount || '0',
									memberPrice: order.memberPrice || '0',
									status: order.orderStatus || '',
									statusText: order.orderStatus === 0 && order.paymentStatus ===
										1 ? '已支付' : this.getStatusText(order.orderStatus),
									refundStatus: order.refundStatus || 0,
									img: order.img || '',
									createTime: order.createTime || '',
									paymentStatus: order.paymentStatus || 0, // 添加支付状态
									prepayId: order.prepayId || '', // 添加prepayId支付凭证
									additionalService: order.additionalService || '',
									commentButtonDisplay: order.commentButtonDisplay || false
								}))
							} else {
								this.orderList = []
							}
							// 只在首次加载时更新状态标签的数量
							if (isFirstLoad) {
								this.updateStatusCounts();
							}
						} else {
							uni.showToast({
								title: res.data.msg || '获取订单列表失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			// 更新状态标签的数量
			updateStatusCounts() {
				// 获取所有订单的总数（用于"全部"标签）
				const allCount = this.orderList.length;
				// 计算每个支付状态的订单数量
				const paymentStatusCounts = {
					0: 0, // 未支付
					1: 0, // 已支付
					2: 0, // 已退款
					3: 0, // 已完成
					4: 0 // 已取消
				};
				// 统计各支付状态数量
				this.orderList.forEach(order => {
					// 已完成和已取消按订单状态统计
					if (order.status === 3) {
						paymentStatusCounts[3]++;
					} else if (order.status === 4) {
						paymentStatusCounts[4]++;
					} else {
						// 其他状态按支付状态统计
						const status = order.paymentStatus || 0;
						if (paymentStatusCounts.hasOwnProperty(status)) {
							paymentStatusCounts[status]++;
						}
					}
				});
				// 更新状态标签的数量
				this.statusTabs = this.statusTabs.map(tab => {
					if (tab.value === null) {
						return {
							...tab,
							count: allCount
						};
					} else {
						return {
							...tab,
							count: paymentStatusCounts[tab.value] || 0
						};
					}
				});
			},
			// 切换支付状态过滤
			switchPaymentStatus(status) {
				this.currentPaymentStatus = status;
				this.loadOrders(false);
			},

			// 格式化日期时间
			formatDateTime(timestamp) {
				if (!timestamp) return ''

				const date = new Date(timestamp)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hours = date.getHours().toString().padStart(2, '0')
				const minutes = date.getMinutes().toString().padStart(2, '0')

				return `${year}年${month}月${day}日${hours}:${minutes}`
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'0': '待支付',
					'1': '待服务',
					'2': '服务中',
					'3': '已完成',
					'4': '已取消',
					'5': '已退款',
					'6': '任务池'
				}
				return statusMap[status] || '未知状态'
			},

			// 获取状态类名
			getStatusClass(status) {
				const classMap = {
					'0': 'status-pending',
					'1': 'status-waiting',
					'2': 'status-processing',
					'3': 'status-completed',
					'4': 'status-cancelled',
					'5': 'status-refunded',
					'6': 'status-pool'
				}
				return classMap[status] || ''
			},

			// 去评价
			goToReview(order) {
				uni.navigateTo({
					url: `/pages/project-comment/project-comment?id=${order.id}`
				})
			},

			// 申请售后
			applyAfterSale(order) {
				uni.navigateTo({
					url: `/pages/report-detail/report-detail?id=${order.id}`
				})
			},

			// 显示取消订单确认框
			showCancelConfirm(order) {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消该订单吗？取消后无法恢复。',
					success: (res) => {
						if (res.confirm) {
							this.cancelOrder(order.id)
						}
					}
				})
			},

			// 取消订单
			cancelOrder(orderId) {
				uni.showLoading({
					title: '处理中...'
				})

				uni.request({
					url: `${uni.$config.baseUrl}/orders/orders/cancel/${orderId}`,
					method: 'POST',
					header: {
						'Authorization': uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data && res.data.code === 200) {
							uni.showToast({
								title: '订单已取消',
								icon: 'success'
							})
							// 刷新订单列表
							setTimeout(() => {
								this.loadOrders(true)
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg || '取消订单失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.error('取消订单失败:', err)
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},

			// 获取支付状态文本
			getPaymentStatusText(status) {
				const statusMap = {
					0: '未支付',
					1: '已支付',
					2: '已退款'
				}
				return statusMap[status] || '未知状态'
			},

			// 获取支付状态类名
			getPaymentStatusClass(status) {
				const classMap = {
					0: 'unpaid',
					1: 'paid',
					2: 'refunded'
				}
				return classMap[status] || ''
			},
			updateOrderPaymentStatus(orderId, paymentStatus) {
				if (!orderId) {
					return
				}
				uni.request({
					url: `${uni.$config.baseUrl}/orders/orders/updatePaymentStatus`,
					method: 'POST',
					data: {
						orderId: orderId,
						paymentStatus: paymentStatus
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {} else {}
					},
					fail: (err) => {}
				})
			},
			goToPay(order) {
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo.openId) {
					uni.showModal({
						title: '微信授权提示',
						content: '首次支付需要绑定微信账号，是否立即前往授权？',
						confirmText: '去授权',
						cancelText: '取消',
						success: res => {
							if (res.confirm) {
								const currentUrl = encodeURIComponent(window.location.href);
								const appId = uni.$config.wxAppId;
								const redirectUrl =
									`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${currentUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
								window.location.href = redirectUrl;
							}
						},
						fail: (err) => {
							uni.showToast({
								title: JSON.stringify(err),
								icon: 'none',
								duration: 2000
							});
						},
					});
					return
				}
				// 显示加载中
				uni.showLoading({
					title: '加载中...'
				});
				// 如果订单已有prepayId，直接使用它进行支付
				if (order.prepayId) {
					// 获取订单详情以获取完整的支付参数
					uni.request({
						url: `${uni.$config.baseUrl}/orders/orders/${order.id}`,
						method: 'GET',
						success: (orderRes) => {
							if (orderRes.statusCode === 200 && orderRes.data.code === 200) {
								const orderData = orderRes.data.data;
								// 构建支付参数
								const paymentData = {
									amount: orderData.paymentAmount,
									orderType: 3, // 预约订单
									orderDesc: order.serviceName,
									callbackUrl: '/pages/my-orders/my-orders?a=1',
									sourcePageData: {
										orderId: order.id,
										orderNo: order.orderNo
									},
									paymentParams: {
										orderId: order.id,
										orderNo: order.orderNo,
										paymentMethod: 1, // 1-微信支付
										orderType: 3, // 3-预约订单
										orderSource: 1 // 1-H5
									}
								};
								// 如果有prepayId，添加到支付参数
								if (order.prepayId) {
									paymentData.paymentParams.prepayId = order.prepayId;
									paymentData.paymentParams.timeStamp = orderData.timeStamp || String(Math
										.floor(Date.now() / 1000));
									paymentData.paymentParams.nonceStr = orderData.nonceStr || this
										.generateNonceStr();
									paymentData.paymentParams.package = `prepay_id=${order.prepayId}`;
									paymentData.paymentParams.signType = 'RSA';
									paymentData.paymentParams.paySign = orderData.paySign || '';
								}
								// 保存支付数据到本地存储
								uni.setStorageSync('paymentData', paymentData);
								uni.hideLoading();
								// 跳转到支付页面
								uni.navigateTo({
									url: '/pages/pay-public/pay-public?login=false'
								});
							} else {
								// 如果获取订单详情失败，尝试重新创建支付订单
								this.createPayOrder(order.id);
							}
						},
						fail: () => {
							// 如果请求失败，尝试重新创建支付订单
							this.createPayOrder(order.id);
						}
					});
				} else {
					// 如果没有prepayId，创建新的支付订单
					this.createPayOrder(order.id);
				}
			},

			// 创建支付订单
			createPayOrder(orderId) {
				// 调用微信支付接口
				uni.request({
					url: `${uni.$config.baseUrl}/orders/orders/createWxPayOrder/${orderId}`,
					method: 'POST',
					success: (payRes) => {
						uni.hideLoading();
						if (payRes.statusCode === 200 && payRes.data.code === 200) {
							const order = this.orderList.find(o => o.id === orderId);
							if (!order) {
								uni.showToast({
									title: '订单信息获取失败',
									icon: 'none'
								});
								return;
							}
							// 构建完整的支付参数
							const paymentData = {
								amount: order.price,
								orderType: 3, // 预约订单
								orderDesc: order.serviceName,
								callbackUrl: '/pages/my-orders/my-orders?a=1',
								sourcePageData: {
									orderId: orderId,
									orderNo: order.orderNo
								},
								paymentParams: {
									orderId: orderId,
									orderNo: order.orderNo,
									paymentMethod: 1, // 1-微信支付
									orderType: 3, // 3-预约订单
									orderSource: 1 // 1-H5
								}
							};
							// 如果有返回的支付参数，添加到paymentParams
							let payData = payRes.data.data;
							if (payData.prepayId) {
								paymentData.paymentParams.prepayId = payData.prepayId;
								paymentData.paymentParams.timeStamp = payData.timeStamp;
								paymentData.paymentParams.nonceStr = payData.nonceStr;
								paymentData.paymentParams.package = payData.package;
								paymentData.paymentParams.signType = payData.signType || 'RSA';
								paymentData.paymentParams.paySign = payData.paySign;
							}
							// 保存支付数据到本地存储
							uni.setStorageSync('paymentData', paymentData);
							// 跳转到支付页面
							uni.navigateTo({
								url: '/pages/pay-public/pay-public?login=false'
							});
						} else {
							uni.showToast({
								title: payRes.data.msg || '支付创建失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('调用支付接口失败:', err)
						uni.showToast({
							title: '支付创建失败',
							icon: 'none'
						});
					}
				});
			},

			// 生成随机字符串
			generateNonceStr(length = 32) {
				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				for (let i = 0; i < length; i++) {
					result += chars.charAt(Math.floor(Math.random() * chars.length));
				}
				return result;
			},

			// 显示退款确认框
			showRefundConfirm(order) {
				uni.showModal({
					title: '申请退款',
					content: '',
					editable: true,
					placeholderText: '请输入退款原因（必填）',
					success: (res) => {
						if (res.confirm) {
							if (!res.content || res.content.trim() === '') {
								uni.showToast({
									title: '请输入退款原因',
									icon: 'none'
								});
								return;
							}
							this.applyRefund(order, res.content);
						}
					}
				});
			},

			// 申请退款
			applyRefund(order, reason) {
				uni.showLoading({
					title: '提交中...'
				});

				// 构建退款申请对象
				const refundApplication = {
					orderId: order.id,
					orderNo: order.orderNo,
					refundAmount: order.price,
					refundReason: reason,
					applicationUserId: uni.getStorageSync('userInfo').memberId,
					applicationUserName: uni.getStorageSync('userInfo').realName,
					applicationUserPhone: uni.getStorageSync('userInfo').phone
				};

				// 调用后端接口
				uni.request({
					url: `${uni.$config.baseUrl}/refundapplication/refundapplication`,
					method: 'POST',
					data: refundApplication,
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {
							uni.showToast({
								title: '退款申请已提交',
								icon: 'success'
							});
							// 刷新订单列表
							setTimeout(() => {
								this.loadOrders(true);
							}, 1000);
						} else {
							uni.showToast({
								title: res.data.msg || '申请退款失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('申请退款失败:', err);
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},

			// 显示二维码
			showQRCode(order) {
				this.currentQRCodeOrder = order;
				this.showQRCodePopup = true;
				setTimeout(() => {
					this.generateQRCode(order.orderNo);
				}, 300);
			},

			// 关闭二维码弹窗
			closeQRCode() {
				this.showQRCodePopup = false;
				this.currentQRCodeOrder = null;
			},

			// 生成二维码
			generateQRCode(content) {
				try {
					const ctx = uni.createCanvasContext('qrcodeCanvas', this);
					ctx.clearRect(0, 0, 300, 300);
					ctx.setFillStyle('#ffffff');
					ctx.fillRect(0, 0, 300, 300);
					new QRCode('qrcodeCanvas', {
						text: String(content),
						width: 300,
						height: 300,
						colorDark: "#000000",
						colorLight: "#ffffff",
						correctLevel: QRCode.CorrectLevel.H,
						callback: (res) => {
							ctx.draw();
						}
					});
				} catch (error) {
					uni.showToast({
						title: '生成二维码失败',
						icon: 'none'
					});
				}
			},

			// 显示订单详情
			showOrderDetail(order) {
				// 格式化订单详情数据
				this.currentOrderDetail = {
					'订单编号': order.orderNo,
					'服务名称': order.serviceName,
					'附加项目': {
						value: order.additionalService || '无',
						type: 'additional'
					},
					'订单类型': order.orderType,
					'门店名称': order.orderType === '上门按摩' ? '' : order.storeName,
					'技师姓名': order.technicianName,
					'预约时间': order.appointmentTime,
					'下单时间': order.createTime,
					'支付金额': {
						value: `¥${order.price}`,
						type: 'price'
					},
					'订单状态': order.statusText,
					'支付状态': this.getPaymentStatusText(order.paymentStatus),
					'退款状态': order.refundStatus === 1 ? '已申请退款' : '未申请退款'
				};

				// 移除空的门店名称
				if (!this.currentOrderDetail['门店名称']) {
					delete this.currentOrderDetail['门店名称'];
				}

				// 显示弹窗
				this.showOrderDetailPopup = true;
			},

			// 关闭订单详情弹窗
			closeOrderDetail() {
				this.showOrderDetailPopup = false;
				this.currentOrderDetail = {};
			},

			// 格式化详情标签
			formatDetailLabel(key) {
				const labelMap = {
					'订单编号': '订单编号',
					'服务名称': '服务项目',
					'附加项目': '附加项目',
					'订单类型': '服务类型',
					'门店名称': '服务门店',
					'技师姓名': '服务技师',
					'预约时间': '预约时间',
					'下单时间': '下单时间',
					'支付金额': '支付金额',
					'会员价格': '会员价格',
					'订单状态': '订单状态',
					'支付状态': '支付状态',
					'退款状态': '退款状态'
				};
				return labelMap[key] || key;
			}
		}
	}
</script>

<style lang="scss">
	.my-orders {
		min-height: 100vh;
		background-color: #F8F8F8;

		.status-tabs {
			background: #FFFFFF;
			padding: 20rpx 0;
			position: sticky;
			top: 0;
			z-index: 100;
			white-space: nowrap;

			.tabs-container {
				display: flex;
				flex-direction: row;
				min-width: 100%;
			}

			.tab-item {
				flex: none;
				min-width: 120rpx;
				padding: 0 20rpx;
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #666;
				position: relative;

				.tab-content {
					display: flex;
					align-items: center;
					white-space: nowrap;
				}

				&.active {
					color: #2B87FF;
					font-weight: 500;

					&::after {
						content: '';
						position: absolute;
						bottom: -10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background: #2B87FF;
						border-radius: 2rpx;
					}
				}

				.count {
					font-size: 24rpx;
					margin-left: 4rpx;
				}
			}
		}

		.header {
			background-color: #FFFFFF;
			padding: 30rpx;
			text-align: center;
			border-bottom: 1rpx solid #EEEEEE;

			.title {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.order-list {
			padding: 20rpx;

			.order-item {
				position: relative;
				background-color: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				display: flex;
				flex-wrap: wrap;

				.order-image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					background-color: #F5F5F5;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 100%;
						height: 100%;
					}

					.placeholder-image {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: #999999;
						font-size: 40rpx;

						.placeholder-text {
							font-size: 24rpx;
							margin-top: 10rpx;
						}
					}
				}

				.order-info {
					flex: 1;
					margin-bottom: 20rpx;
					padding-right: 80rpx;

					.order-title {
						font-size: 32rpx;
						color: #333333;
						font-weight: 500;
						margin-bottom: 16rpx;
						margin-top: 30rpx;

						.title-text {
							display: inline-block;
							max-width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.additional-services {
						font-size: 28rpx;
						color: #2B87FF;
						font-weight: 500;
						margin-bottom: 16rpx;
						display: block;
					}

					.booking-info {
						font-size: 28rpx;
						color: #666666;
						margin-bottom: 8rpx;
					}

					.booking-time {
						font-size: 28rpx;
						color: #666666;
						margin-bottom: 16rpx;
					}

					.price-info {
						display: flex;
						align-items: center;

						.price {
							font-size: 32rpx;
							color: #E4393C;
							margin-right: 16rpx;
						}

						.member-price {
							font-size: 28rpx;
							color: #999999;
						}
					}

					.payment-status {
						font-size: 28rpx;
						color: #666666;
						margin-top: 16rpx;

						.paid {
							color: #4CD964;
							font-weight: 500;
						}

						.unpaid {
							color: #FF3B30;
							font-weight: 500;
						}

						.refunded {
							color: #FF9500;
							font-weight: 500;
						}
					}

					.action-space {
						height: 60rpx;
					}
				}

				.order-actions {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					margin-top: 20rpx;
					padding-top: 20rpx;
					border-top: 1rpx solid #EEEEEE;

					.action-btn {
						padding: 10rpx 30rpx;
						border: 1rpx solid #DDDDDD;
						border-radius: 30rpx;
						margin-left: 20rpx;

						text {
							font-size: 26rpx;
							color: #666666;
						}
					}

					.pay-btn {
						background-color: #2B87FF;
						border-color: #2B87FF;

						text {
							color: #FFFFFF;
						}
					}

					.cancel-btn {
						background-color: #FF3B30;
						border-color: #FF3B30;

						text {
							color: #FFFFFF;
						}
					}

					.refund-btn {
						background-color: #FF9500;
						border-color: #FF9500;

						text {
							color: #FFFFFF;
						}
					}

					.qrcode-btn {
						background-color: #4CD964;
						border-color: #4CD964;

						text {
							color: #FFFFFF;
						}
					}
				}

				.order-status {
					position: absolute;
					top: 15rpx;
					right: 30rpx;
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					border-radius: 4rpx;
					z-index: 2;

					&.status-pending {
						background-color: #FF9500;
						color: #FFFFFF;
					}

					&.status-waiting {
						background-color: #2B85E4;
						color: #FFFFFF;
					}

					&.status-processing {
						background-color: #5856D6;
						color: #FFFFFF;
					}

					&.status-completed {
						background-color: #4CD964;
						color: #FFFFFF;
					}

					&.status-cancelled {
						background-color: #999999;
						color: #FFFFFF;
					}

					&.status-refunded {
						background-color: #FF3B30;
						color: #FFFFFF;
					}

					&.status-pool {
						background-color: #FF9500;
						color: #FFFFFF;
					}
				}
			}

			.no-data {
				text-align: center;
				padding: 60rpx 0;
				color: #999999;
				font-size: 28rpx;
			}
		}

		.qrcode-popup {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;

			.qrcode-content {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				width: 600rpx;
				padding: 30rpx;

				.qrcode-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.qrcode-title {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.qrcode-close {
						font-size: 40rpx;
						color: #999999;
						padding: 10rpx;
					}
				}

				.qrcode-body {
					display: flex;
					flex-direction: column;
					align-items: center;

					.qrcode-canvas {
						width: 400rpx;
						height: 400rpx;
						margin-bottom: 20rpx;
						background-color: #ffffff;
					}

					.qrcode-tip {
						font-size: 28rpx;
						color: #666666;
					}
				}
			}
		}

		.order-detail-popup {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;

			.order-detail-content {
				background-color: #FFFFFF;
				border-radius: 24rpx;
				width: 650rpx;
				max-height: 80vh;
				display: flex;
				flex-direction: column;
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);

				.order-detail-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					border-bottom: 1rpx solid #EEEEEE;
					background: linear-gradient(135deg, #2B87FF, #1A6FE0);
					border-radius: 24rpx 24rpx 0 0;

					.order-detail-title {
						font-size: 34rpx;
						font-weight: 600;
						color: #FFFFFF;
					}

					.order-detail-close {
						font-size: 40rpx;
						color: rgba(255, 255, 255, 0.8);
						padding: 10rpx;

						&:active {
							opacity: 0.7;
						}
					}
				}

				.order-detail-body {
					padding: 20rpx 30rpx;
					max-height: 60vh;
					overflow-y: auto;

					&::-webkit-scrollbar {
						width: 6rpx;
					}

					&::-webkit-scrollbar-thumb {
						background: rgba(0, 0, 0, 0.1);
						border-radius: 3rpx;
					}

					&::-webkit-scrollbar-track {
						background: transparent;
					}

					.detail-item {
						display: flex;
						padding: 24rpx 0;
						border-bottom: 1rpx solid #F5F5F5;

						&:last-child {
							border-bottom: none;
						}

						.detail-label {
							width: 180rpx;
							font-size: 28rpx;
							color: #999999;
							font-weight: 400;
						}

						.detail-value {
							flex: 1;
							font-size: 28rpx;
							color: #333333;
							font-weight: 500;

							&.price {
								color: #E4393C;
								font-weight: 600;
							}

							&.additional {
								color: #2B87FF;
								font-weight: 500;
							}

							&.status {
								display: inline-block;
								padding: 4rpx 16rpx;
								border-radius: 20rpx;
								font-size: 24rpx;

								&.paid {
									background: rgba(76, 217, 100, 0.1);
									color: #4CD964;
								}

								&.unpaid {
									background: rgba(255, 59, 48, 0.1);
									color: #FF3B30;
								}

								&.refunded {
									background: rgba(255, 149, 0, 0.1);
									color: #FF9500;
								}
							}
						}
					}
				}
			}
		}
	}
</style>